<template>
  <div class="homecontainer">
    <div class="hbanr">
      <div class="hbx">
        <div class="lety">
          <img @click="getHeaderlink(0)" src="~@/assets/imgRed/touxiang1.jpg" />
          <div class="shuru" @click="getsearch">
            <span class="jiao"></span>
            <p>名称/代码/拼音首字母</p>
          </div>
        </div>
        <div class="rety">
          <!-- <span class="yf"></span> -->
          <!-- <span class="kf"></span> -->
        </div>
      </div>
      <!-- <div class="five">
        <div class="danw" @click="getHeaderlink(1)">
          <img
            src=""
          />
          <p>股票</p>
        </div>
        <div class="danw" @click="getHeaderlink(2)">
          <img
            src=""
          />
          <p>基金</p>
        </div>
        <div class="danw" @click="getHeaderlink(3)">
          <img
            src=""
          />
          <p>学院</p>
        </div>
        <div class="danw" @click="getHeaderlink(4)">
          <img
            src=""
          />
          <p>在线客服</p>
        </div>
        <div class="danw" @click="getHeaderlink(5)">
          <img
            src=""
          />
          <p>开户</p>
        </div>
      </div> -->
    </div>
    <div class="dang">
      <!-- <div class="xbox" @click="getHeaderlink1(1)">
        <img
          src=""
        />
        <p>新股申购</p>
      </div>
      <div class="xbox" @click="getHeaderlink1(2)">
        <img
          src=""
        />
        <p>新债申购</p>
      </div> -->
      <div class="xbox" @click="getHeaderlink(5)">
        <img src="~@/assets/img/qianbao.png" alt="" />
        <p>极速开户</p>
      </div>
      <div class="xbox" @click="getHeaderlink1(3)">
        <img
          src=""
        />
        <p>大宗交易</p>
      </div>
      <div class="xbox" @click="getHeaderlink1(4)">
        <img
          src=""
        />
        <p>VIP抢筹</p>
      </div>
      <div class="xbox" @click="getHeaderlink1(5)">
        <img
          src=""
        />
        <p>新股抢筹</p>
      </div>
      <div class="xbox" @click="getHeaderlink1(6)">
        <img
          src=""
        />
        <p>龙虎榜</p>
      </div>
      <div class="xbox" @click="getHeaderlink1(7)">
        <img
          src=""
        />
        <p>每日停复牌</p>
      </div>
      <div class="xbox" @click="getHeaderlink1(8)">
        <img
          src=""
        />
        <p>十大成交股</p>
      </div>
      <div class="xbox" @click="getHeaderlink1(9)">
        <img
          src=""
        />
        <p>每日涨停</p>
      </div>
      <div class="xbox" @click="getHeaderlink1(10)">
        <img
          src=""
        />
        <p>交易规则</p>
      </div>
    </div>
    <div class="zhongjian">
      <div class="xbox" @click="getHeaderlink1(3)">
        <img
          width="30"
          height="30"
          src=""
        />
        <p>大宗交易</p>
        <div style="font-size: x-large;margin-left: 5.5rem;">></div>
      </div>
    </div>
    <div class="zoushit" id="Zline">
      <!-- <img src="~@/assets/home/2fa61d555f5d044966d7d87eac6665f.png" alt=""> -->
    </div>
    <div class="hushenmain">
      <div class="hushenwz">沪深</div>
      <div class="zhangfuright">
        <div class="red">上涨</div>
        <div class="zhangfutiao">
          <div
            id="up"
            :style="
              'width:' +
                (
                  (hushentiao.zhang / (hushentiao.zhang + hushentiao.die)) *
                  100
                ).toFixed(2) +
                '%'
            "
          ></div>
          <div
            id="down"
            :style="
              'width:' +
                (
                  (hushentiao.die / (hushentiao.zhang + hushentiao.die)) *
                  100
                ).toFixed(2) +
                '%'
            "
          ></div>
        </div>
        <div class="green"><span>下跌</span></div>
      </div>
    </div>
    <div class="touti">
      <img
        src=""
      />
      <div class="bofang">
        <!-- <div role="alert" class="van-notice-bar" style="background: transparent;">
                      <div role="marquee" class="van-notice-bar__wrap">
                          <div class="van-notice-bar__content"
                              style="transition-duration: 10.3612s; transform: translateX(-333.516px);">
                              周五美联储逆回购工具使用规模为2.050万亿美元</div>
                      </div>
                  </div> -->
        <van-notice-bar :text="noticebar"></van-notice-bar>
      </div>
    </div>
    <van-tabs v-model="tabactive" class="ghbn" @click="getNewsList">
      <van-tab title="财经要闻" name="1"></van-tab>
      <!-- <van-tab title="经济数据" name="2"></van-tab> -->
      <van-tab title="全球股市" name="3"></van-tab>
      <van-tab title="7*24全球" name="4"></van-tab>
      <van-tab title="商品资讯" name="5"></van-tab>
      <van-tab title="上市公司" name="6"></van-tab>
      <!-- <van-tab title="全球央行" name="7"></van-tab> -->
    </van-tabs>
    <div class="ganhj"></div>
    <ul class="wul">
      <li
        class="wlis"
        v-for="(item, index) in newsContent1"
        :key="index"
        @click="getnewsdetail(item)"
      >
        <img class="li_righ" v-if="item.imgurl" :src="item.imgurl" alt="" />
        <div class="li_left tuk">
          <h6>{{ item.title }}</h6>
          <p>{{ new Date(item.addTime) | timeFormat }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import * as api from "@/axios/api";
import { init, dispose } from "klinecharts";
export default {
  components: {},
  props: {},
  data() {
    return {
      tabactive: 1,
      newsContent1: [],
      noticebar: "",
      hushentiao: "",
      isshow: true
    };
  },
  mounted() {
    this.getNewsList(1);
    this.stockgetZdfNumber();
    this.kLineChart = init("Zline");
    this.kLineChart.setStyleOptions({
      candle: {
        type: "area"
      }
    });
    this.getkline();
  },
  destroyed: function() {
    dispose("chart-type-k-line");
    this.isshow = false;
  },
  methods: {
    async getkline(
      baseTimestamp = Date.now(),
      basePrice = 5000,
      dataSize = 800
    ) {
      var opt = {
        code: "000001",
        time: 5,
        ma: 5,
        size: 100
      };
      let data = await api.getMinK_Echarts(opt);
      var klinelist = data.data.values.reverse();
      const dataList = [];
      for (let i = 0; i < klinelist.length; i++) {
        // const element = klinelist[i];
        const kLineModel = {
          open: klinelist[i][0],
          low: klinelist[i][2],
          high: klinelist[i][3],
          close: klinelist[i][1],
          volume: klinelist[i][4],
          timestamp: klinelist[i][5]
        };
        dataList.unshift(kLineModel);
      }
      // const dataList = []
      // let timestamp = Math.floor(baseTimestamp / 60 / 1000) * 60 * 1000
      // let baseValue = basePrice
      // const prices = []
      // for (let i = 0; i < dataSize; i++) {
      //     baseValue = baseValue + Math.random() * 20 - 10
      //     for (let j = 0; j < 4; j++) {
      //         prices[j] = (Math.random() - 0.5) * 12 + baseValue
      //     }
      //     prices.sort()
      //     const openIdx = +Math.round(Math.random() * 3).toFixed(0)
      //     let closeIdx = +Math.round(Math.random() * 2).toFixed(0)
      //     if (closeIdx === openIdx) {
      //         closeIdx++
      //     }
      //     const volume = Math.random() * 50 + 10
      //     const kLineModel = {
      //         open: prices[openIdx],
      //         low: prices[0],
      //         high: prices[3],
      //         close: prices[closeIdx],
      //         volume: volume,
      //         timestamp
      //     }
      //     timestamp -= 60 * 1000
      //     kLineModel.turnover = (kLineModel.open + kLineModel.close + kLineModel.high + kLineModel.low) / 4 * volume
      //     dataList.unshift(kLineModel)
      // }

      // console.log(dataList, generatedKLineDataList())
      var that = this;
      setTimeout(() => {
        this.kLineChart.applyNewData(dataList);
      }, 500);
      if (this.isshow) {
        setTimeout(() => {
          that.getkline();
        }, 3000);
      }
    },
    getsearch() {
      this.$router.push({
        path: "/Searchlist"
      });
    },
    async stockgetZdfNumber() {
      let data = await api.stockgetZdfNumber();
      this.hushentiao = data.data;
    },
    async getNewsList(type) {
      let data = await api.queryNewsList(type);
      // console.log('xinwen:', data)
      this.newsContent1 = data.data.list;
      this.noticebar = data.data.list[0].title;
    },
    getnewsdetail(item) {
      this.$router.push({
        path: "/newPage",
        query: {
          listid: item.id
        }
      });
    },
    getHeaderlink(val) {
      if (val == 0) {
        this.$router.push({
          path: "/MyList"
        });
      } else if (val == 1) {
        this.$router.push({
          path: "/trading-list"
        });
      } else if (val == 2) {
        this.$router.push({
          // path: '/jijin'
          path: "/about?e=6"
        });
      } else if (val == 3) {
        this.$router.push({
          //path: '/college'
          path: "/about?e=6"
        });
      } else if (val == 4) {
        this.$router.push({
          path: "/service"
        });
      } else if (val == 5) {
        this.$router.push({
          path: "/openaccount"
        });
      }
    },
    getHeaderlink1(val) {
      switch (val) {
        case 1:
          this.$router.push({
            path: "/Subscription"
          });
          break;
        case 2:
          this.$router.push({
            path: "/Subscription?idx=3"
          });
          break;
        case 3:
          this.$router.push({
            path: "/Subscription?idx=4"
          });
          break;
        case 4:
          this.$router.push({
            path: "/Subscription?idx=5"
          });
          break;
        case 5:
          this.$router.push({
            path: "/Subscription?idx=2"
          });
          break;
        case 6:
          this.$router.push({
            path: "/DragonTiger"
          });
          break;
        case 7:
          this.$router.push({
            path: "/stopRecovery"
          });
          break;
        case 8:
          this.$router.push({
            path: "/topTen"
          });
          break;
        case 9:
          this.$router.push({
            path: "/daylimit"
          });
          break;
        case 10:
          this.$router.push("/about?e=5");
          break;
      }
    },
    async getInfoSite() {
      let data = await api.getInfoSite();
      if (data.status === 0) {
        this.onlineService = data.data.onlineService;
      } else {
        this.$store.commit("elAlertShow", {
          elAlertShow: true,
          elAlertText: data.msg
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.red {
  color: #d73d3d;
}

.green {
  color: #20b844;
}

.homecontainer {
  background: #fff;
  min-height: 100vh;
}

.hbanr {
  width: 100%;
  height: 3.65rem;
  background: url("~@/assets/home/bjing.b7cbcd97.png") no-repeat 50%;
  background-size: 100%;
  margin: 0 auto;

  .hbx {
    width: 9.47rem;
    margin: 0 auto;
    height: 1.17rem;
    padding-top: 0.4rem;
    justify-content: space-between;
    display: flex;

    .lety {
      display: flex;

      img {
        width: 0.69rem;
        height: 0.69rem;
        margin-right: 0.4rem;
        margin-top: 0.11rem;
      }

      .shuru {
        width: 8rem;
        height: 0.91rem;
        background: hsla(0, 0%, 100%, 0.2);
        border-radius: 0.45rem;
        display: flex;

        span {
          width: 0.43rem;
          height: 0.43rem;
          background: url()
            no-repeat 50%;
          background-size: 100%;
          margin-left: 0.27rem;
          margin-top: 0.24rem;
        }

        p {
          color: #ffd2cc;
          font-size: 0.38rem;
          line-height: 0.85rem;
          margin-left: 0.19rem;
        }
      }
    }

    .rety {
      display: flex;
      margin-top: 0.19rem;

      .yf {
        width: 0.51rem;
        height: 0.51rem;
        background: url()
          no-repeat 50%;
        background-size: 100%;
        margin-right: 0.32rem;
      }

      .kf {
        width: 0.51rem;
        height: 0.51rem;
        background: url()
          no-repeat 50%;
        background-size: 100%;
      }
    }
  }

  .five {
    width: 9.35rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 0.85rem;

    .danw {
      width: 20%;
      text-align: center;

      img {
        width: 0.85rem;
        height: 0.85rem;
      }

      p {
        font-size: 0.37rem;
        color: #fff;
        margin-top: 0.266rem;
      }
    }
  }
}

.dang {
  width: 9.37rem;
  padding-bottom: 0.43rem;
  background: #fff;
  box-shadow: 0 0.05rem 0.14rem 0 rgb(227 227 227);
  border-radius: 0.266rem;
  margin: 0 auto;
  margin-top: -1.6rem;
  display: flex;
  flex-wrap: wrap;

  .xbox {
    width: 20%;
    text-align: center;
    margin-top: 0.53rem;

    img {
      width: 0.77rem;
      height: 0.77rem;
    }

    p {
      color: #333;
      font-size: 0.35rem;
      margin-top: 0.21rem;
    }
  }
}
.zhongjian {
  width: 9.37rem;

  height: 1.3rem;
  background: #fff;
  box-shadow: 0 0.05rem 0.14rem 0 rgb(227 227 227);
  border-radius: 0.266rem;
  margin: 0 auto;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  .xbox {
    height: 1.3rem;
    margin-left: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
    p {
      margin-left: 0.5rem;
      font-size: 0.33rem;
    }
  }
}
.zoushit {
  width: 9.37rem;
  height: 2.67rem;
  margin: 14px auto;
  // background: #fff;
  // border: 1px solid #e0e0e0;
  // border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 2px;
  border-radius: 10px;
  margin-top: 10px;

  img {
    width: 100%;
    border-radius: 20px;
  }
}

.hushenmain {
  display: flex;
  align-items: center;
  width: 9.37rem;
  margin: auto;
  justify-content: space-between;

  .hushenwz {
    font-size: 0.4rem;
    font-weight: bold;
    color: rgb(51, 51, 51);
    margin-right: 10px;
  }

  .zhangfuright {
    display: flex;
    align-items: center;
    flex: 1 1 0%;
    font-size: 0.32rem;

    .zhangfutiao {
      width: 40%;
      display: flex;
      align-items: center;
      margin: 0px 5px;

      #up {
        width: 30%;
        height: 7px;
        border-radius: 3px;
        background-image: url();
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      #down {
        width: 70%;
        height: 7px;
        border-radius: 3px;
        background-image: url();
        background-size: cover;
        // background-position: center;
        background-repeat: no-repeat;
      }
    }
  }
}

.touti {
  width: 9.37rem;
  height: 1.07rem;
  background: #fef4db;
  border-radius: 0.266rem;
  margin: 0 auto;
  display: flex;
  margin-top: 0.266rem;

  img {
    width: 1.01rem;
    height: 0.48rem;
    margin-left: 0.32rem;
    margin-top: 0.32rem;
  }

  .bofang {
    color: #eb973c;
    width: 7.74rem;
    font-size: 0.37rem;
    line-height: 1.07rem;
    margin-left: 0.32rem;

    .van-notice-bar {
      height: 1.07rem;
      background: transparent;
      font-size: 0.37rem;
      line-height: 1.07rem;
    }
  }
}

.ghbn {
  margin-top: 0.266rem;

  /deep/ .van-tab--active {
    font-weight: 600;
    font-size: 0.44rem !important;
    color: #000;
  }

  /deep/ .van-tab {
    font-size: 0.37rem;
  }

  /deep/ .van-tabs__wrap {
    height: 1rem !important;
  }
}

.ganhj {
  height: 0.03rem;
  background: #ececec;
  margin-top: 0.266rem;
}

.wul {
  width: 8.6rem;
  margin: 0 auto;
  margin-bottom: 2.14rem;

  .wlis {
    width: 8.6rem;
    display: flex;
    // justify-content: space-between;
    border-bottom: 0.03rem solid #ececec;
    margin-top: 0.37rem;
    padding-bottom: 0.266rem;

    .li_righ {
      width: 2.3rem;
      height: 1.74rem;
      margin-right: 0.266rem;
    }

    .li_left.tuk {
      margin-left: 0.266rem;
    }

    .li_left {
      h6 {
        color: #333;
        font-size: 0.37rem;
        line-height: 0.53rem;
        font-weight: 600;
      }

      p {
        color: #999;
        margin-top: 0.16rem;
        font-size: 0.35rem;
      }
    }
  }
}
</style>
